<script setup lang="ts">

import applications from "@/pages/application/data/applications.json";
import {Input} from "@/components/ui/input";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {AppWindowMacIcon, SlidersHorizontalIcon, SortAscIcon, SortDescIcon} from "lucide-vue-next";
import {Separator} from "@/components/ui/separator";
import {Button} from "@/components/ui/button";
import {Badge} from "@/components/ui/badge";
import {statuses} from "@/pages/application/data/data";
import {computed, ref} from "vue";

const searchQuery = ref('')
const selectedStatus = ref('')
const selectedSort = ref('ascending')

const filteredApps = computed(() => {
  return applications.data
      .sort((a, b) => {
        return selectedSort.value == 'ascending'
            ? a.name.localeCompare(b.name)
            : b.name.localeCompare(a.name)
      })
      .filter((app) => {
        if (!selectedStatus.value || selectedStatus.value == 'all') {
          return true;
        }
        return app.status === selectedStatus.value
      })
      .filter((app) => app.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
})

</script>

<template>
  <div class="w-full flex flex-col items-stretch gap-4">
    <div class="flex flex-wrap items-end justify-between gap-2">
      <div>
        <h2 class="text-2xl font-bold tracking-tight">
          Applications
        </h2>
        <p class="text-muted-foreground">
          Here&apos;s a list of your applications!
        </p>
      </div>
    </div>

    <div class='my-4 flex items-end justify-between sm:my-0 sm:items-center'>
      <div class='flex flex-col gap-4 sm:my-4 sm:flex-row'>
        <Input
            placeholder='Filter apps...'
            class='h-9 w-40 lg:w-[250px]'
            v-model="searchQuery"
        />
        <Select v-model="selectedStatus">
          <SelectTrigger class='w-36'>
            <SelectValue placeholder="Select a status"></SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectItem v-for="appStatus in statuses" :value="appStatus.value"> {{ appStatus.label }}</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <Select v-model="selectedSort">
        <SelectTrigger class='w-16'>
          <SelectValue v-model="selectedSort">
            <Component :is="SlidersHorizontalIcon"/>
          </SelectValue>
        </SelectTrigger>
        <SelectContent align='end'>
          <SelectItem value='ascending'>
            <div class='flex items-center gap-4'>
              <Component :is="SortAscIcon"/>
              <span>Ascending</span>
            </div>
          </SelectItem>
          <SelectItem value='descending'>
            <div class='flex items-center gap-4'>
              <Component :is="SortDescIcon"/>
              <span>Descending</span>
            </div>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
    <Separator class='shadow-sm'/>

    <ul class='faded-bottom no-scrollbar grid gap-4 overflow-auto pt-4 pb-16 md:grid-cols-2 lg:grid-cols-3'>
      <li
          v-for="app in filteredApps"
          :key="app.name"
          class='rounded-lg border p-4 hover:shadow-md space-y-2'
      >
        <div class='mb-8 flex items-center justify-between'>
          <div class='bg-muted flex size-10 items-center justify-center rounded-lg p-2'>
            <Component :is="AppWindowMacIcon"/>
          </div>
          <Button
              variant='outline'
              size='sm'
              :class="app.status == 'stopped' ? 'border border-red-300 bg-red-50 hover:bg-red-100 dark:border-red-700 dark:bg-red-950 dark:hover:bg-red-900' : ''"
          >
            {{ app.status }}
          </Button>
        </div>
        <div>
          <h2 class='mb-1 font-semibold'>{{ app.name }}</h2>
          <p class='line-clamp-2 text-gray-500'>{{ app.description }}</p>
        </div>
        <div class="space-x-2">
          <Badge
              variant="outline"
              v-for="appBadge in app.labels">
            {{ appBadge }}
          </Badge>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>
